:root{
    --green:#00ff66;
    --yellow:#ffd400;
    --signal:#111;
    --mast:#bcc2c8;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
/*    background:#eef2f5; */
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}

.signal-nav{
    position:relative;
    margin-left:50px;
    width:320px;
    padding:40px 0;
}

.mast{
    position:absolute;
    left:32px;
    top:40px;
    bottom:40px;
    width:20px;
    border-left:2px solid #d8dde1;
    border-right:2px solid #d8dde1;
    background:
      repeating-linear-gradient(
          45deg,
          transparent 0 8px,
          #bcc2c8 8px 10px
      ),
      repeating-linear-gradient(
          -45deg,
          transparent 0 8px,
          #bcc2c8 8px 10px
      );
}

.signal{
    display:flex;
    align-items:center;
    gap:20px;
    position:relative;
    margin:28px 0;
    text-decoration:none;
    color:#222;
    height:70px;
}

.signal-head{
    width:76px;
    height:76px;
    border-radius:50%;
    background:
      radial-gradient(
        circle at 35% 35%,
        #1d1d1d,
        #000
      );
    box-shadow:
      inset 3px 3px 6px rgba(255,255,255,.05),
      inset -3px -3px 6px rgba(0,0,0,.6),
      0 6px 16px rgba(0,0,0,.3);
    display:flex;
    justify-content:center;
    align-items:center;
	    overflow:hidden;
}

.signal-lens{
    width:30px;
    height:30px;
    border-radius:50%;
    background:
      radial-gradient(
        circle at 35% 35%,
        #500,
        #200
      );
    border:4px solid #111;
    box-shadow:
      inset 0 0 12px rgba(0,0,0,.8);
}

.label{
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:.02em;
}

.signal:hover .label{
    color:#000;
}

.traveling-aspect {
position: absolute;
left: 21px; /* centers inside 74px wide head */
width: 34px;
height: 34px;
border-radius: 50%;
z-index: 10;
transition: top 0.85s cubic-bezier(.25, .8, .25, 1);
pointer-events: none;
}

.traveling-aspect.green{
    background:
      radial-gradient(
         circle,
         #25ff82 0%,
         #00e060 55%,
         #00b34b 100%
      );
/*    box-shadow:
       0 0 12px #00ff66,
       0 0 30px #00ff66,
       0 0 60px #00ff66,
       0 0 90px rgba(0,255,102,.4); */
	   
	  box-shadow:
       0 0 6px #00ff66,
       0 0 12px #00ff66,
       0 0 20px rgba(0,255,102,.7);
}

.traveling-aspect.yellow{
    background:var(--yellow);
    box-shadow:
      0 0 10px var(--yellow),
      0 0 20px var(--yellow),
      0 0 40px var(--yellow);
}

.mast-finial{
    position:absolute;
    left:6px;
    top:-18px;
    width:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:20;
}

.finial-spire{
    width:0;
    height:0;
/*    border-left:7px solid transparent;
    border-right:7px solid transparent; */
    border-bottom:25px solid #bcc2c8;
    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

.finial-ball{
    width:28px;
    height:28px;
    border-radius:50%;
    background:
      radial-gradient(
        circle at 35% 30%,
        #ffffff,
        #d8dde1 45%,
        #b6bcc3 100%
      );
    margin-top:-1px;
    box-shadow:
      inset 2px 2px 4px rgba(255,255,255,.5),
      inset -2px -2px 4px rgba(0,0,0,.15);
}

.finial-base{
    width:36px;
    height:12px;
    margin-top:-4px;
    border-radius:6px;
    background:
      linear-gradient(
         #eef1f4,
         #bcc2c8
      );
    box-shadow:
      0 1px 2px rgba(0,0,0,.15);
}

.mast-pedestal{
    position:absolute;
    left:4px;
    bottom:18px;
    width:76px;
    height:22px;
    border-radius:4px;
    background:
      linear-gradient(
        #eef1f4,
        #b7bcc2
      );
    box-shadow:
      0 2px 5px rgba(0,0,0,.2);
}

@keyframes clearSignal {
    0%   { transform: scale(.85); }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Mobile */

@media (max-width:768px){
    body{
        align-items:flex-start;
    }
    .signal-nav{
        margin:20px;
        width:auto;
    }
    .label{
        font-size:1rem;
    }
}

/* Mobile navigation */

.mobile-nav{
    display:none;
}

@media (max-width:768px){

    .signal-nav{
        display:none;
    }

    .mobile-nav{
        display:block;
    }
}

.menu-button{
    border:none;
    background:none;
    font-size:1.2rem;
    font-weight:600;
    padding:12px 16px;
    cursor:pointer;
}

.mobile-menu{
    display:none;
    padding:0 16px 16px;
}

.mobile-menu.open{
    display:block;
}

.mobile-menu a{
    display:block;
    text-decoration:none;
    color:#222;
    padding:14px 0;
    font-size:1.1rem;
    border-bottom:
        1px solid rgba(0,0,0,.08);
}

.mini-signal{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#00ff66;
    display:inline-block;
    margin-right:8px;
    box-shadow:
        0 0 8px #00ff66;
}